body {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.lunbo {

    img {
        width: 100%;
        height: 100%;
    }

}

.center {
    width: 100% !important;
    overflow: auto;
    flex: 1;
    display: flex;

    justify-content: flex-start;

    flex-direction: column;
}



.content-main {
    user-select: none;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;

    .mian-t {

        // height: 145px;
        width: 100%;


        .ranking {
            border-radius: 15px;
            overflow: hidden;
            background-color: rgba(20, 147, 206, 0.8);
            width: 40%;
            height: 100%;
            display: flex;

            justify-content: space-between;
            flex-direction: column;
            .r-img {

                width: 100%;
                height: 100%;
                background: url(../img/index-card-rank.png) no-repeat;
                background-size: 80% 70%;
                left: -10%;
                top: 25%;

            }

            .r-day {
                text-align: center;
                z-index: 1;
                color: #fff;
                font-size: 58px;
            }

            .r-to {
                font-size: 20px;
                color: #032230;
                z-index: 1;
            }

        }

        .punch-card {
            border-radius: 15px;
            background-color: rgba(21, 146, 204, .6);
            width: 55%;

            img {
                position: absolute;
                left: 10%;
                bottom: 0;
                width: 50%;
                height: 70%;
            }

            .add-car {
                top: 15%;
                left: 5%;
                font-size: 18px;
                color: #17303b;

            }

            .to-car {
                text-align: center;
                width: 60%;
                padding: 10px 5px;
                font-size: 18px;
                border-radius: 20px;
                border: 2px solid #17303b;
                bottom: 15%;
                left: 50%;
                transform: translateX(-20%);
            }

            .isCard{
                color: #fff;
                border-color: rgb(255, 255, 255);
                background-color: rgb(48, 115, 177);
               
            }


        }


    }

    .mian-m {

        width: 100%;
        overflow: hidden;


        .motion-data {
            border-radius: 15px;
            width: 45%;

            img {
                border-radius: 15px;
                width: 100%;
                height: auto;
            }

            span {
                color: #fff;
                z-index: 1;
                left: 5%;
                top: 10%;

            }
        }

        .badge {
            overflow: hidden;
            border-radius: 15px;
            background-color: rgba(46, 120, 170, .8);
            width: 50%;

            img {
                bottom: 0;
                width: 60%;
            }

            span {
                top: 10%;
                left: 5%;
            }

            p {
                color: #17303b;
                bottom: 10%;
                right: 10%;
                font-size: 18px;

                span {
                    font-size: 60px;
                }
            }


        }

    }


    .pro-train {
        overflow: hidden;
        border-radius: 15px;
        width: 100%;
        height: 120px;

        div {

            height: 100%;

            img {
                width: 100%;

            }

            span {
                color: #fff;
                top: 10%;
                left: 3%;
            }
        }
    }

    .out-run {
        overflow: hidden;
        height: 120px;
        border-radius: 15px;

        img {
            width: 100%;
        }
        span{
            color: #fff;
            top: 10%;
            left: 3%;
        }
    }

}